<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=S, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list"></ul>
    <script>
        //当对节点进行添加、删除等操作时，都会引起页面回流来重新渲染页面,即重新渲染颜色，
        //尺寸，大小、位置等等。所以会带来对性能的影响。

       //1.可以将DOM写成html字符串，然后使用innerHTML添加到页面中，
       //但这种操作会比较麻烦，且不方便使用节点操作的相关方法。

        //2.使用createDocumentFragment来管理节点时，此时节点都在内存中，
        // 而不是DOM树中。对节点的操作不会引发页面回流,带来比较好的性能体验。

        //3比如你要删除某个节点，给某个父元素增加子元素，这类操作都会引起回流。
        //如果要加多个子元素，最好使用documentfragment。
        var list = document.querySelector('#list')
        var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

        var fragment = new DocumentFragment()//相当于缓存的效果

        fruits.forEach(function (fruit) {
        var li = document.createElement('li')
        li.innerHTML = fruit
        fragment.appendChild(li)
        })

        list.append(fragment)
    </script>
</body>
</html>